<!--Page for displaying  information about clans-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Clan - Comics.US</title>
<link rel="stylesheet" href="template.css" type="text/css" />

<style type="text/css">
.style1 {
	text-decoration: underline;
}
</style>

</head>
<body style="background: transparent url('background/bg1t.png') no-repeat fixed center top">

<div id="outer_container">
  <div id="inner_container">
    <div id="header_wrapper">


      <div id="login"><!--Display username if logged on-->
        Welcome, {{username}}
      </div>  
    </div>
    <div id="navigator_container"><!--Links on tpo of page-->
     <div id="navigator"><a href="home" id="gl1" class="glink"> Home  |   </a><a href="comics" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);"> Comics  |   </a><a href="fiction" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);"> Fictions  |   </a><a href="gallery" id="gl4" class="glink" onmouseover="ehandler(event,menuitem3);"> Gallery  |   </a><a href="clan" id="gl5" class="glink" onmouseover="ehandler(event,menuitem3);"> Clans  |   </a><a href="people" id="gl7" class="glink" onmouseover="ehandler(event,menuitem3);"> People  |   </a><a href="profile/{{username}}" id="gl6" class="glink" onmouseover="ehandler(event,menuitem3);"> Profile </a></div>


      <div id="search_container">
        <form id="form2" name="form2" method="post" action="">
          <label>
            <input type="text" name="textfield3" id="textfield3" />
            <input type="submit" name="button" id="button" value="Search" width="15px" />
          </label>
        </form>
      </div>
    </div>
    <div id="listing_header_container">
      <p>Breadcrumb (remain the same for all pages)</p>
    </div>
	<a href="../createClan"><input type="button" name="button12" id="button12" value="Create a New Clan" /></a>
    <div id="clan_listing">
    	<div id="left_clan_listing">
		{% for f in Clanclass1 %} <!-- Display the five (1-5) recently founded clan-->
			<div id="single_clan_listing_pic">
				<a href="clan/{{f.clanName}}"> <img alt="" height="95" src="clanpics/{{f.clanName}}.jpg" width="126" /></a></div> <!-- display clan picture -->
			<div id="single_clan_listing_text"><strong>Clan Name-</strong>{{f.clanName}}<br />
				<strong>Founder-</strong><a href="../profile/{{f.clanFounder}}"> <u>{{f.clanFounder}}</u> </a><strong>On-</strong> date<br />
				<strong><span class="style1"><a href="specific.html" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">More</a></span></strong></div> <!-- display clan information-->
		{% endfor %}	
		</div>
		
		<div id="right_clan_listing">
		{% for f in Clanclass2 %} <!-- Display the five (1-5) recently founded clan-->
			<div id="single_clan_listing_pic">
				<a href="clan/{{f.clanName}}"> <img alt="" height="95" src="clanpics/{{f.clanName}}.jpg" width="126" /></a></div> <!-- display clan picture -->
			<div id="single_clan_listing_text"><strong>Clan Name-</strong>{{f.clanName}}<br />
				<strong>Founder-</strong><a href="../profile/{{f.clanFounder}}"> <u>{{f.clanFounder}}</u> </a><strong>On-</strong> date<br />
				<strong><span class="style1"><a href="specific.html" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">More</a></span></strong></div> <!-- display clan information-->
		{% endfor %}
			</div> 
			
    </div>
	
	
	<div id="footer_container">
    	<div style="float: right; margin: 5px 5px 5px 5px; height: 30px;">
    		<form id="form3" name="form3" method="post" action="">
         		 <label>
           			 <input type="text" name="textfield3" id="textfield3" />
         			  <input type="submit" name="button" id="button" value="Clan Search" width="15px" />
          		</label>
       		</form>
   	 	</div>
	</div>
    <div id="footer_container">
    footer_container
    </div>
  </div>
</div>
</body>
</html>

